<template>
  <div class="all">
    <!-- <div class="button">
        <el-button @click="addBtn($event)">添加</el-button>
        <el-button @click="putBtn($event)">修改</el-button>
        <el-button @click="delBtn($event)">删除</el-button>
      </div> -->
      <el-table
        
        :data="tableData"
        :row-style="{height: '60px'}"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >

        <!-- <el-table-column
          type="selection"
          width="55px"
          fixed="left"
        /> -->

        <el-table-column
          label="序号"
          type="index"
        >
          <template scope="scope">
            <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-for="(item,index) in title"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          show-overflow-tooltip
        >

        </el-table-column>

      </el-table>
      <div class="page"> 
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[pageSize, 20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>


      <!-- 新增修改 -->
      <div class="dialog">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="27.683%"
      center="center"
      :before-close="handleClose"
    >
      <!-- 弹窗内容 -->
      <div class="content">
        <el-form
          ref="submitData"
          :model="submitData"
          
          label-width="100px"
          class="demo-ruleForm"
        >

          <!-- 名字 -->
          <el-form-item
            label="名字:"
            prop="name"
          >
            <el-input
              v-model="submitData.name"
              placeholder="输入名字"
            />
          </el-form-item>

          <!-- 排序 -->
          <el-form-item
            label="排序:"
            prop="sort"
          >
            <el-input
              v-model="submitData.sort"
              placeholder="排序"
            />
          </el-form-item>
          <!-- 描述 -->
          <el-form-item
            label="描述:"
            prop="describe"
          >
            <el-input
              v-model="submitData.describe"
              placeholder="描述"
            />
          </el-form-item>
  

        </el-form>
      </div>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <div class="footer_button">
          <el-button
            type="primary"
            @click="submitForm('submitData')"
          >提交</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import {LogList} from "@/api/dataReq"
import { req } from '@/api/basicReq'
export default {
  name: 'RoomFloor',
  props: {
  
  },
  data(){
      return{
          title:[
          { prop: 'name', label: '名字' },
          { prop: 'grade_name', label: '等级' },
          { prop: 'describe', label: '描述' },
          { prop: 'user_name', label: '用户' },
          { prop: 'timer', label: '时间' },
          { prop: 'ip', label: 'IP' },
          
          ],
          tableData: [],
          selectData: {},
          currentPage: 1, 
          pageSize: 10, 
          total: 100, 

          dialogVisible:false,
          dialogTitle: "新增",
          submitData:{
            name:null,
            sort: null,
            describe:null,
          },

          result:null,
          Method:"post",
      }
  },
  created(){
    this.getData()
    
  },

  methods:{
    getData(){
      var reqData  ={
        page_size: this.pageSize,
        page_num: this.currentPage,
      }
      LogList(reqData).then(response => {
        if (response.code == '1') {
          // console.log(response)
         this.tableData = response.data
         this.total = response.total

        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
    },
   

    handleClose(){
      this.dialogVisible = false
    },

      handleClick(row){

      },
      handleSelectionChange(val) {
      this.selectData = val
    
  },
  handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getData()
    },
  addBtn(ev){
    this.dialogVisible = true

    this.dialogTitle = '添加'
    if (this.submitData) {
      this.submitData = {}
    }
   
    this.dialogVisible = true
    this.Method = 'post'
  },

  putBtn(ev){
    this.Method = 'put'
    this.dialogTitle = '修改'
    if (this.selectData.length == '1') {
      this.submitData = { ...this.selectData[0] }
      this.dialogVisible = true
      
    } else if (this.selectData.length >= '1') {
      this.$message({
        message: '只能选择一条要修改的数据',
        type: 'warning'
      })
    } else {
      this.$message({
        message: '请先选择要修改的数据',
        type: 'warning'
      })
    }
  },
  delBtn(ev){
    if (this.selectData.length > 0) {
      const idList = []
      this.selectData.forEach((item) => {
        idList.push(item.id)
      })
      var data = {
        url: 'room/RoomFloor',
        method: 'delete',
        data: { id: idList }
      }
      req(data).then((res) => {
       
        if (res.code == 1) {
          this.$message.success('删除成功')
          if (
            idList.length == this.tableData.length &&
            this.currentPage != 1
          ) {
            this.currentPage--
          }
          this.getData()
        }
      })
    } else {
      this.$message({
        message: '请先选择要删除的数据',
        type: 'warning'
      })
    }
  },

  
  submitForm(){
    
    var reqData = {
      url: 'room/RoomFloor',
      method: this.Method,
      data: this.submitData
    }
    req(reqData).then(response => {
        if (response.code == '1') {
          if(this.Method=="post"){
            this.$message.success('新增成功')
          }else{
            this.$message.success('修改成功')
          }
          
          this.dialogVisible = false

          this.getData()
        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
    // console.log(formData)
  },

  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '~@/style/minxin.scss';
 $allbackcolor: rgba(11,44,108,1);
$selectcolor: rgba(1,18,67, 1);


.all{
  height: 80vh;
}
.button {
      display: flex;
      justify-content: end;
      margin-bottom: 10px;
      .el-button{
color: #fff;
background-color: $selectcolor;
border: 1px solid gray;
}
    }

.page{
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
/deep/ .el-input__inner {
  background-color: rgba(1,18,67, 1);
  border-color: rgba(11,44,108,1);
  color: white;
}




/deep/ li.active {
    color: rgb(50, 111, 234);
}
/deep/ .number {
  background-color: rgba(1,18,67, 1);
  border-color: rgba(11,44,108,1);
  color: white;
}
/deep/ .el-pagination .btn-prev {
  background-color: rgba(1,18,67, 1);
  border-color: rgba(11,44,108,1);
  color: white;
}
/deep/ .el-pagination .btn-next {
  background-color: rgba(1,18,67, 1);
  border-color: rgba(11,44,108,1);
  color: white;
}
/deep/ .el-pagination__total {
 
  color: white;
}
/deep/ .el-pagination__jump {
  
  color: white;
}
}

.imgBtn {
  // width: 100%;
  position: relative;
  .img_btn {
    @include flex-center;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    color: #dcdfe6;
    font-size: 30px;
    width: 80px;
    height: 80px;
    overflow: hidden;
  }

  .img_btn > input {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
  }

  .img_btn > img {
    width: 75px;
    height: 75px;
    object-fit: scale-down;
    position: absolute;
    top: center;
    left: center;
  }
}
::v-deep {
.tableTooltip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 弹窗
.el-dialog {
  min-width: 400px;
}

.el-form-item__label {
  text-align: center;
}

.el-input__inner {
  height: 30px;
}
// 下拉框
.el-select {
  width: 100%;
}

.el-dialog--center .el-dialog__body {
  padding: 0 25px;
}

.hide .el-upload--picture-card {
  display: none;
}

.showImg {
  .el-dialog {
    height: 500px;
    @include flex-column;
    justify-content: center;
    .content {
      flex: 1;
      @include flex-center;
      img {
        width: 100%;
        height: 100%;
        object-fit: scale-down;
      }
    }
  }
}

.el-table__header .el-table-column--selection .cell .el-checkbox:after {
  color: #909399;
  content: '全选';
  font-size: 14px;
  margin-left: 2px;
  font-weight: bold;
}
}
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
background-color: transparent !important;
color: #fff;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
background-color: transparent !important;
color: #fff;
}
</style>
